<template>
	<el-dialog :title="dialog.title" v-model="dialog.isShowDialog" append-to-body :close-on-click-modal="false" width="500px">
		<el-form ref="formRef" :model="ruleForm" :rules="rules" label-width="auto">
			<el-form-item label="可提现金额" prop="money">
				<el-input v-model="ruleForm.money" disabled />
			</el-form-item>
			<el-form-item label="提现金额" prop="money_deserved">
				<el-input v-model="ruleForm.money_deserved" placeholder="请输入提现" @input="verifyNumberIntegerAndFloatMoneyDeserved" />
			</el-form-item>
			<el-form-item label="结算卡联行号" prop="bank_code">
				<el-input v-model="ruleForm.bank_code" disabled />
			</el-form-item>
			<el-form-item label="结算银行卡开户名" prop="account_name">
				<el-input v-model="ruleForm.account_name" disabled />
			</el-form-item>
			<el-form-item label="结算银行卡账号" prop="account_no">
				<el-input v-model="ruleForm.account_no" disabled />
			</el-form-item>
			<el-form-item label="手续费" prop="procedure_money">
				<el-input v-model="ruleForm.procedure_money" disabled />
			</el-form-item>
			<el-form-item v-if="Number(ruleForm.money_reality)" label="最终到账金额" prop="money_reality">
				<el-input v-model="ruleForm.money_reality" disabled />
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button type="primary" :loading="dialog.submitLoading" @click="onSubmitForm">确定</el-button>
			<el-button @click="onCancel">取消</el-button>
		</template>
	</el-dialog>
</template>

<script lang="ts">
import { nextTick, reactive, ref, toRefs, watch } from 'vue';

import { supplier1Api } from '/@/api/admin';
import { verifyNumberIntegerAndFloat } from '/@/utils/toolsValidate';
import { ElMessage } from 'element-plus';

const Supplier1Api = supplier1Api();
let callback: Function = () => {};
export default {
	setup() {
		const validatePersonMoneyDeserved = (rule: any, value: string, callback: any) => {
			if (Number(value) <= Number(state.ruleForm.procedure_money)) {
				callback(new Error(`最低提现金额不能低于${state.ruleForm.procedure_money}元`));
			} else if (Number(value) > Number(state.ruleForm.money)) {
				callback(new Error(`提现金额不能大于可提现金额${state.ruleForm.money}元`));
			} else {
				callback();
			}
		};
		const state = reactive({
			dialog: {
				isShowDialog: false,
				type: '',
				title: '申请提现',
				submitLoading: false,
			},
			ruleForm: {
				money_deserved: '',
				money_reality: 0,
				money: '',
				account_name: '',
				account_no: '',
				bank_code: '',
				procedure_money: '',
			},
			rules: {
				money_deserved: [
					{ required: true, message: '提现金额不能为空', trigger: ['blur'] },
					{ required: true, validator: validatePersonMoneyDeserved, trigger: ['blur'] },
				],
			},
		});
		const formRef = ref();

		watch(
			() => state.ruleForm.money_deserved,
			(val) => {
				if (Number(val) > Number(state.ruleForm.procedure_money)) {
					state.ruleForm.money_reality = Number(val) - Number(state.ruleForm.procedure_money);
				} else {
					state.ruleForm.money_reality = 0;
				}
			}
		);

		/********** 触发事件 **********/
		// 提交
		const onSubmitForm = () => {
			formRef.value.validate((valid: boolean) => {
				if (!valid) return;
				_confirmSupplierWithdrawalPayment({
					money: state.ruleForm.money_deserved,
				});
			});
		};
		// 取消
		const onCancel = () => {
			state.dialog = {
				isShowDialog: false,
				type: '',
				title: '申请提现',
				submitLoading: false,
			};
		};

		/********** 方法事件 **********/
		//打开
		const openDialog = (params: Object, fn: Function) => {
			state.dialog.isShowDialog = true;
			callback = fn;
			_applySupplierWithdrawalPayment(params);
			nextTick(() => {
				formRef.value.resetFields();
			});
		};
		// 提现金额过滤
		const verifyNumberIntegerAndFloatMoneyDeserved = (val: string) => {
			state.ruleForm.money_deserved = verifyNumberIntegerAndFloat(val);
		};

		/********** 网络请求 **********/
		// 申请打款【获取资料】
		const _applySupplierWithdrawalPayment = (params: Object) => {
			Supplier1Api.applySupplierWithdrawalPayment(params).then((res) => {
				state.ruleForm = {
					...params,
					...res.data.info,
					money_deserved: '',
					money_reality: 0,
				};
			});
		};
		// 确认打款
		const _confirmSupplierWithdrawalPayment = (params: Object) => {
			Supplier1Api.confirmSupplierWithdrawalPayment(params)
				.then(() => {
					ElMessage.success('操作成功');
					onCancel();
					callback();
				})
				.catch(() => {
					state.dialog.submitLoading = false;
				});
		};

		return {
			...toRefs(state),
			formRef,
			verifyNumberIntegerAndFloatMoneyDeserved,
			openDialog,
			onSubmitForm,
			onCancel,
		};
	},
};
</script>
